<template>
  <a-drawer
    width="900px"
    :title="title"
    :visible="visible"
    :bodyStyle="{ padding: '1px' }"
    @close="cancel"
    ><div class="eip-drawer-body beauty-scroll">
      <a-spin :spinning="table.loading">
        <vxe-table ref="table" row-key :data="button" :height="height">
          <vxe-table-column title="排序" width="48" align="center">
            <template>
              <span class="drag-btn">
                <a-icon type="drag" />
              </span>
            </template>
          </vxe-table-column>

          <vxe-table-column title="新增" width="54px" align="center">
            <template #header>
              <a-button @click="add" size="small" type="primary">
                <a-icon type="plus" />
              </a-button>
            </template>
            <template v-slot="{ row }">
              <a-popconfirm
                title="确定删除查询配置?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="del(row)"
              >
                <a-button size="small" type="danger">
                  <a-icon type="delete"></a-icon>
                </a-button>
              </a-popconfirm>
            </template>
          </vxe-table-column>

          <vxe-table-column title="名称" width="120px">
            <template v-slot="{ row }">
              <a-input placeholder="请输入名称" v-model="row.name" />
            </template>
          </vxe-table-column>
          <vxe-table-column title="方法名" width="200px">
            <template v-slot="{ row }">
              <a-input placeholder="请输入方法名" v-model="row.method" />
            </template>
          </vxe-table-column>

          <vxe-table-column title="脚本" width="60px" align="center">
            <template v-slot="{ row }">
              <a-badge :dot="row.script != null && row.script != ''">
                <a-button size="small" @click="scriptEdit(row)" type="primary">
                  <a-icon type="edit" />
                </a-button>
              </a-badge>
            </template>
          </vxe-table-column>
          <vxe-table-column title="图标" width="120px" align="center">
            <template v-slot="{ row }">
              <eip-icon
                :name="row.icon"
                :theme="row.theme"
                @click="iconClick(row, $event)"
                @clear="iconClear(row)"
              ></eip-icon>
            </template>
          </vxe-table-column>
          <vxe-table-column title="类型" width="120px" align="center">
            <template v-slot="{ row }">
              <a-select
                style="width: 100px"
                default-value="primary"
                allow-clear
                v-model="row.type"
              >
                <a-select-option value="primary">主按钮 </a-select-option>
                <a-select-option value=""> 次按钮 </a-select-option>
                <a-select-option value="dashed"> 虚线按钮 </a-select-option>
                <a-select-option value="danger"> 危险按钮 </a-select-option>
                <a-select-option value="link"> 链接按钮 </a-select-option>
                <a-select-option value="upload"> 上传按钮 </a-select-option>
              </a-select>
            </template>
          </vxe-table-column>
          <vxe-table-column title="冻结" width="60px" align="center">
            <template v-slot="{ row }">
              <a-switch v-model="row.isFreeze" />
            </template>
          </vxe-table-column>
          <vxe-table-column title="备注" width="100px">
            <template v-slot="{ row }">
              <a-input placeholder="请输入备注" v-model="row.remark" />
            </template>
          </vxe-table-column>
        </vxe-table>
      </a-spin>
    </div>
    <div class="eip-drawer-toolbar">
      <a-space>
        <a-button key="back" @click="cancel" :disabled="loading"
          ><a-icon type="close" />取消</a-button
        >
        <a-button key="submit" @click="save" type="primary" :loading="loading"
          ><a-icon type="save" />提交</a-button
        >
      </a-space>
    </div>
    <a-drawer
      width="600px"
      placement="right"
      :bodyStyle="{ padding: '1px' }"
      :visible="script.visible"
      title="脚本配置"
      @close="script.visible = !script.visible"
    >
      <codemirror v-model="script.content" @change="scriptChange"></codemirror>
    </a-drawer>
  </a-drawer>
</template>

  <script>
import { codemirror } from "vue-codemirror-lite";
import { query } from "@/services/system/menubutton/list";
import { saveAll } from "@/services/system/menubutton/edit";
import eipIcon from "@/pages/common/usercontrol/eip-icon";
import Sortable from "sortablejs";
export default {
  name: "button-index",
  components: { codemirror, eipIcon },
  data() {
    return {
      height: window.innerHeight - 111,
      table: {
        loading: false,
      },
      button: [],
      loading: false,
      script: {
        visible: false,
        content: "",
      },
      item: null,
    };
  },

  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    menuId: {
      type: String,
    },
    title: {
      type: String,
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    /**
     * 取消
     */
    cancel() {
      this.$emit("update:visible", false);
    },
    /**
     * 新增
     */
    add() {
      this.button.push({
        icon: "",
        isFreeze: false,
        method: "",
        theme: "outlined",
        type: "primary",
        script: "",
        remark: "",
      });
      this.rowDrop();
    },
    /**
     * 拖拽
     */
    rowDrop() {
      let that = this;
      const xTable = this.$refs.table;
      this.sortable1 = Sortable.create(
        xTable.$el.querySelector(".body--wrapper>.vxe-table--body tbody"),
        {
          handle: ".drag-btn",
          onEnd: ({ newIndex, oldIndex }) => {
            const currRow = that.button.splice(oldIndex, 1)[0];
            that.button.splice(newIndex, 0, currRow);
          },
        }
      );
    },
    /**
     * 删除
     */
    del(row) {
      let spIndex = -1;
      this.button.forEach((item, index) => {
        if (item._X_ROW_KEY == row._X_ROW_KEY) {
          spIndex = index;
        }
      });
      if (spIndex != -1) {
        this.button.splice(spIndex, 1);
      }
    },

    /**
     * 初始化
     */
    init() {
      let that = this;
      this.table.loading = true;
      query({
        current: 1,
        size: 100,
        sord: "asc",
        sidx: "",
        id: this.menuId,
        filters: "",
      }).then((result) => {
        that.table.loading = false;
        if (result.code == that.eipResultCode.success) {
          that.button = result.data;
          that.rowDrop();
        }
      });
    },

    /**
     *
     */
    scriptEdit(item) {
      this.item = item;
      this.script.content = item.script ? item.script : "";
      this.script.visible = true;
    },

    /**
     *
     * @param {*} v
     */
    scriptChange(v) {
      this.item.script = v;
    },

    /**
     *图标点击
     */
    iconClick(row, data) {
      row.icon = data.name;
      row.theme = data.theme;
    },

    /**
     * 清空图标
     */
    iconClear(row) {
      row.icon = "";
      row.theme = "";
    },
    /**
     * 保存
     */
    save() {
      let that = this;
      that.$loading.show({ text: that.eipMsg.saveloading });
      saveAll({
        menuId: that.menuId,
        menuButton: JSON.stringify(that.button),
      }).then(function (result) {
        if (result.code === that.eipResultCode.success) {
          that.$message.success(result.msg);
          that.cancel();
          that.$emit("comfirm");
        } else {
          that.$message.error(result.msg);
        }
        that.$loading.hide();
      });
    },
  },
};
</script>

  <style lang="less" scoped>
.drag-btn {
  cursor: move;
}

/deep/ .CodeMirror {
  height: calc(100vh - 66px);
}
</style>
